<template>
  <div class="per">
    <van-nav-bar
      title="个人中心"
      right-text="注册"
      @click-right="onClickRight"
      :border="false"
    >
      <template #right>
        <van-icon name="setting-o" size="22" color="#888" />
      </template>
    </van-nav-bar>
    <div class="loginmain">
      <div class="loginimg">
        <div v-if="$store.state.islogin==1">
          <van-image
            @click="fangdatupian"
            round
            width="6rem"
            height="6rem"
            fit="cover"
            :src="`/img/avatar/${userinfo.avatar}`"
          />
          <p class="nickname">{{ userinfo.nickname?userinfo.nickname:userinfo.uname}}</p>
          <p class="signature">{{ userinfo.sign }}</p>
        </div>
        <div v-else>
          <van-image
            round
            width="6rem"
            height="6rem"
            fit="cover"
            :src="require('../../assets/weidr.png')"
          />
          <p>未登入,<router-link to="/login">点击登录/注册</router-link></p>
        </div>
        <!-- <van-uploader v-model="fileList" multiple :max-count="1" /> -->
      </div>
    </div>
    <van-grid :border="false" :column-num="3">
      <van-grid-item @click="coll">
        <van-image
          :src="require('../../assets/shouc.png')"
          width="20"
          height="20"
        />
        <p class="perp">收藏</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          :src="require('../../assets/guanzhu.png')"
          width="20"
          height="20"
        />
        <p class="perp">关注</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          :src="require('../../assets/fensi.png')"
          width="20"
          height="20"
        />
        <p class="perp">喜欢</p>
      </van-grid-item>
    </van-grid>
    <van-cell-group>
      <van-cell icon="qr" title="我的菜单" is-link @click="showPopup">
      </van-cell>
      <van-cell
        icon="orders-o"
        title="我的菜谱"
        is-link
        @click="showPopup"
      ></van-cell>
      <van-cell
        icon="records"
        title="美食日记"
        is-link
        @click="showPopup"
      ></van-cell>
      <van-cell
        icon="chat-o"
        title="消息通知"
        is-link
        @click="showPopup"
      ></van-cell>
      <van-cell
        icon="service-o"
        title="联系我们"
        is-link
        @click="showPopup"
      ></van-cell>
    </van-cell-group>
    <tabbar></tabbar>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
export default {
  // props:["result"],
  data() {
    return {
      uname: "",
      upwd: "",
      userinfo: "",
      uploader: [{ url: "/img/avatar/14.jpg" }],
    };
  },
  mounted() {
    console.log(this.$store.state.islogin)
    this.axios
      .get(`/users/userinfo/?uname=${this.$store.state.username}`)
      .then((result) => {
        this.userinfo = result.data.result;
        console.log(this.userinfo);
      });
  },
  methods: {
    onClickRight() {
      this.$router.push('/personalset')
    },
    showPopup() {},
    coll() {
      this.$router.push("/collect");
    },
    fangdatupian() {
      ImagePreview({
        images: [`/img/avatar/${this.userinfo.avatar}`],
      });
    },
  },
};
</script>

<style lang="scss">
.per {
  .loginmain {
    margin: 0 auto;
    width: 70%;
  }
  .loginimg {
    text-align: center;
    padding: 20px 30px;
  }
  .nickname {
    margin-top: 10px;
    font-family: "Courier New", Courier, monospace;
    font-weight: 600;
  }
  .signature {
    margin-top: 10px;
    font-size: 12px;
    color: rgb(122, 121, 120);
  }
  .perp {
    margin-top: 5px;
    font-size: 12px;
    color: rgb(122, 121, 120);
  }
  .van-icon-qr::before {
    color: red;
  }
  .van-icon-records::before {
    color: red;
  }
  .van-icon-chat-o::before {
    color: rgb(106, 9, 170);
  }
  .van-icon-service-o::before {
    color: rgb(252, 148, 13);
  }
}
</style>
